import { computed } from 'vue';
import type { BlogPost, PostDependency } from '@/components/GanttChart/types';

export function useGanttConfig() {
  const generateConfig = (posts: BlogPost[], plugins: any[]) => ({
    licenseKey: process.env.VITE_GSTC_LICENSE_KEY,
    plugins,
    list: {
      rows: generateRows(posts),
      columns: generateColumns(),
      rowItemContent: {
        template: (row: any) => `
            <div class="row-content">
              <span class="title">${row.data.label}</span>
              <span class="status ${row.data.status}">${getStatusText(row.data.status)}</span>
            </div>
          `
      }
    },
    chart: {
      items: generateItems(posts),
      time: {
        period: 'week',
        from: new Date().setDate(new Date().getDate() - 7),
        to: new Date().setDate(new Date().getDate() + 30)
      }
    },
    locale: {
      name: 'zh',
      weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      months: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月'
      ]
    }
  });

  const generateRows = (posts: BlogPost[]) =>
    posts.map(post => ({
      id: post.id,
      label: post.title,
      status: post.status,
      progress: post.progress,
      category: post.category,
      expanded: true,
      meta: {
        contentLink: post.contentLink,
        isMilestone: post.isMilestone
      }
    }));

  const generateColumns = () => [
    {
      id: 'title',
      label: '标题',
      data: ({ row }: any) => row.label,
      width: 200,
      sortable: true,
      header: { content: '文章标题' }
    },
    {
      id: 'status',
      label: '状态',
      data: ({ row }: any) => getStatusText(row.status),
      width: 100,
      sortable: true
    },
    {
      id: 'progress',
      label: '进度',
      data: ({ row }: any) => `${Math.round(row.progress * 100)}%`,
      width: 80,
      sortable: true
    }
  ];

  const generateItems = (posts: BlogPost[]) =>
    posts.map(post => ({
      id: post.id,
      rowId: post.id,
      label: post.title,
      time: {
        start: new Date(post.startDate),
        end: new Date(post.endDate)
      },
      progress: post.progress,
      status: post.status,
      style: {
        background: getStatusColor(post.status),
        borderRadius: '4px'
      },
      itemContent: {
        template: (item: any) => `
          <custom-gantt-item 
            :item="item" 
            :row="api.row.get(item.rowId)"
            :api="api"
          />
        `
      }
    }));

  const getStatusText = (status: string) => {
    const statusMap: Record<string, string> = {
      draft: '草稿',
      writing: '写作中',
      review: '审核中',
      scheduled: '待发布',
      published: '已发布',
      archived: '归档'
    };
    return statusMap[status] || status;
  };

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      draft: '#93c5fd',
      writing: '#fcd34d',
      review: '#a5b4fc',
      scheduled: '#c7d2fe',
      published: '#86efac',
      archived: '#d1d5db'
    };
    return colors[status] || '#d1d5db';
  };

  return { generateConfig };
}
